<template>
  <div id="banner">
    <div id="Edition">
      <div class="vipconst_img">
        <img src="../../../../public/ycbimg/vipconst_img.png" alt>
      </div>
      <div class="bannerone">
        <img src="../../../../public/ycbimg/bannerone.png" alt>
      </div>
      <div class="bannertwo">
        <P>
          <b>会员专属活动</b>
        </P>
        <!-- <div class="bannertwo_img">
                    <img src="../../../../public/ycbimg/bannertwoimg.png" alt="">
        </div>-->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item><img src="../../../../public/ycbimg/bt1img/1.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../../../../public/ycbimg/bt1img/2.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../../../../public/ycbimg/bt1img/3.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../../../../public/ycbimg/bt1img/4.png" alt=""></van-swipe-item>
        </van-swipe>
      </div>
      <div class="discount">
        <P>
          <b>会员专属活动</b>
        </P>
        <div class="discount_top discountimg">
          <img src="../../../../public/ycbimg/discount_top.png" alt>
        </div>
        <div class="discount_bottom discountimg">
          <img src="../../../../public/ycbimg/discount_top.png" alt>
        </div>
        <span>
          <b>—— 专享券领取后七天内有效 ——</b>
        </span>
      </div>
    </div>
    <div class="welfare">
      <img src="../../../../public/ycbimg/welfare_img.png" alt>
    </div>
    <div id="privilege">
      <div class="privilege_title">
        <b>功能特权</b>
      </div>
      <div>
        <ul class="privilege_ul">
          <li>
            <div class="li_d1">
              <img src="../../../../public/ycbimg/mianfei.jpg" alt>
            </div>
            <div class="li_d2">
              <p>
                <b>好课免费</b>
              </p>
              <span>0元畅想千门付费课</span>
            </div>
          </li>
          <li>
            <div class="li_d1">
              <img src="../../../../public/ycbimg/youhui.jpg" alt>
            </div>
            <div class="li_d2">
              <p>
                <b>专属优惠</b>
              </p>
              <span>每周领3张通用券</span>
            </div>
          </li>
          <li>
            <div class="li_d1">
              <img src="../../../../public/ycbimg/tejia.jpg" alt>
            </div>
            <div class="li_d2">
              <p>
                <b>专属特价</b>
              </p>
              <span>购买课程专属折扣价</span>
            </div>
          </li>
          <li>
            <div class="li_d1">
              <img src="../../../../public/ycbimg/shenfen.jpg" alt>
            </div>
            <div class="li_d2">
              <p>
                <b>专属身份</b>
              </p>
              <span>尊贵黄金标识</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="bannerthree">
        <div class="bannerthree_title">
          <b>名师大咖</b>
        </div>
        <div class="bannerthree_img">
          <img src="../../../../public/ycbimg/bannerthree.png" alt>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe,SwipeItem } from 'vant';
export default {
 components:{
    [Swipe.name]:Swipe,
    [SwipeItem.name]:SwipeItem
  }
};
</script>

<style scoped>
#banner {
  width: 100%;
  margin-top: 0.7rem;
}
#Edition {
  width: 3.45rem;
  margin: auto;
}
.vipconst_img {
  width: 100%;
  height: 1.64rem;
  margin-top: 0.15rem;
  margin-bottom: 0.3rem;
}
.vipconst_img img {
  width: 100%;
  height: 100%;
}
.bannerone {
  width: 100%;
  height: 2.75rem;
  margin-bottom: 0.15rem;
}
.bannerone img {
  width: 100%;
  height: 100%;
}
.bannertwo {
  width: 100%;
  height: 1.5rem;
}
.bannertwo p {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.18rem;
}
.bannertwo_img {
  width: 100%;
  height: 1rem;
}
.my-swipe{
    width: 100%;
    height: 1rem;
  overflow-y: hidden;
}
 .my-swipe .van-swipe-item {
    color: #fff;
    width: 100%;
  height: 1rem;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    float: left;
  }
  .my-swipe .van-swipe-item img{
      width: 100%;
      height: 100%;
  }
.bannertwo_img img {
  width: 100%;
  height: 0.82rem;
}
.discount {
  width: 100%;
  height: 2.5rem;
}
.discount p {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.18rem;
}
.discountimg {
  width: 100%;
  height: 0.78rem;
}
.discount_top {
  margin-bottom: 0.15rem;
}
.discountimg img {
  width: 100%;
  height: 100%;
}
.discount span {
  text-align: center;
  display: block;
  font-size: 12px;
  color: #d89d75;
}
.welfare {
  width: 100%;
  height: 0.78rem;
}
.welfare img {
  width: 3.68rem;
  height: 0.5rem;
  margin: auto;
}
#privilege {
  width: 3.45rem;
  margin: auto;
}
.privilege_title {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.18rem;
}
.privilege_ul {
  width: 100%;
  height: 1.26rem;
}
.privilege_ul li {
  width: 50%;
  height: 0.4rem;
  float: left;
  margin-bottom: 0.16rem;
}
.privilege_ul li .li_d1 {
  width: 0.4rem;
  height: 0.4rem;
  float: left;
}
.privilege_ul li .li_d1 img {
  width: 100%;
  height: 100%;
}
.privilege_ul li .li_d2 {
  width: 1.3rem;
  height: 100%;
  float: left;
  margin-left: 0.025rem;
}
.privilege_ul li .li_d2 p {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 14px;
}
.privilege_ul li .li_d2 p {
  height: 0.2rem;
  line-height: 0.2rem;
  font-size: 0.14rem;
}
.privilege_ul li .li_d2 span {
  height: 0.2rem;
  display: block;
  color: gray;
  line-height: 0.2rem;
  font-size: 0.12rem;
}
.bannerthree {
  width: 100%;
  height: 3.6rem;
}
.bannerthree_title {
  width: 100%;
  height: 0.58rem;
  font-size: 18px;
  line-height: 0.58rem;
}
.bannerthree_img {
  width: 100%;
  height: 2.7rem;
}
.bannerthree_img img {
  width: 100%;
  height: 100%;
}
</style>
